<template>
	<view class="page" :style="{paddingTop: `${topHeight}px`}">
		<view class="linear" :style="{top: `-${topHeight}px`}"></view>
		<view class="header">
			<view style="width: 33%;">
				<view class="h-l" @tap="goBack">
					<up-icon name="arrow-left" color="#fff"></up-icon>
				</view>
			</view>
			<view class="h-c" style="width: 33%;text-align: center;">
				<text style="color: #fff;">拍照路线</text>
			</view>
			<view class="h-r" style="width: 33%;text-align: right;">
				<text style="color: #fff;">2025-07-08</text>
			</view>
		</view>
		<!--地图-->
		<view id="map" :mapData="mapData" :change:mapData="mapDom.dataChange" style="height: 40vh;"></view>
		<!--拍照时间线-->
		<scroll-view scroll-y="true" class="route-detail">
			<view class="route-header">
				<text>路线详情</text>
				<view class="route-total">
					<view class="card">
						<text>3个</text>
						<text class="description">地点数</text>
					</view>
					<view class="card">
						<text>1.2公里</text>
						<text class="description">总里程(估算)</text>
					</view>
					<view class="card">
						<text>7分钟</text>
						<text class="description">拍照停留</text>
					</view>
				</view>
			</view>
			<MyTimeLine></MyTimeLine>
		</scroll-view>
	</view>
</template>

<script>
	import MyTimeLine from '@/components/watermarkCamera/my-timeline.vue'
	export default {
		components: {
			MyTimeLine,
		},
		data() {
			return {
				topHeight:0,
				mapData: null, // render交互
				map: null, // 地图实例
				
			}
		},
		created(){
		    let app = uni.getSystemInfoSync();
		  	this.topHeight = app.statusBarHeight;
			console.log("123===",this.topHeight)
		},
		methods: {
			goBack () {
				uni.navigateBack({ delta: 1 });
			}
		}
	}
</script>
<script module="mapDom" lang="renderjs">
	// 添加高德安全密钥（不加无法定位）
  // #ifdef APP-PLUS
	window._AMapSecurityConfig = {
		securityJsCode: "6a3b0ae034d75c523abf64e1a334791e"
	};
	import AMapLoader from "@amap/amap-jsapi-loader";
// #endif
	export default {
		data() {
			return {
				map: null,
			}
		},
		methods: {
			dataChange(newValue, oldValue, ownerVm, vm) {
				this.initMap()
				if (newValue != null || newValue != '' || newValue != undefined) {
					const newData = JSON.parse(newValue);
					this.initMap(newData.kaoqinInfo, newData.userPost)
				}
			},
			initMap(kaoqinInfo, userPost) {
				const that = this;
				AMapLoader.load({
					key: "c9c069d05cb4075e3e24aefea6f77b85", // 申请好的Web端开发者Key，首次调用 load 时必填
					version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
					plugins: ['AMap.Geocoder','AMap.Polyline'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
				}).then((AMap) => {
					that.map = new AMap.Map("map", {
						// 设置地图容器id
						viewMode: "3D", // 是否为3D地图模式
						zoom: 20, // 初始化地图级别
						//[118.315784,33.823084]
						center: [118.315784, 33.823084], // 初始化地图中心点位置 当前人所在位置
					});
					
					const marker = new AMap.Marker({
					  position: [118.315784, 33.823084], //点标记的位置 当前人所在位置
					  offset: new AMap.Pixel(-7, -20), //偏移量
					  content: '1',
					});
					that.map.add(marker);
					
					const marker2 = new AMap.Marker({
					  position: [118.31563621785278,33.82309527630428], //点标记的位置 当前人所在位置
					  offset: new AMap.Pixel(-7, -20), //偏移量
					  content: '2',
					});
					that.map.add(marker2);
					
					const marker3 = new AMap.Marker({
					  position: [118.31583621785278,33.82319527630428], //点标记的位置 当前人所在位置
					  offset: new AMap.Pixel(-7, -20), //偏移量
					  content: '3',
					});
					that.map.add(marker3);
					
					let path = [[118.315784, 33.823084], [118.31563621785278,33.82309527630428],[118.31583621785278,33.82319527630428]]
					let polyline = new AMap.Polyline({
						path: path,
						strokeColor: '#0cc185',
						strokeWeight: 10,
						strokeOpacity: 0.9,
						zIndex: 50,
						strokeStyle:"solid",//线样式
						showDir: true//是否显示箭头
					})

					that.map.add(polyline);
				}).catch((e) => {
					console.log(e);
				});
			}
		}
	}
</script>
<style lang="scss" scoped>
	page {
		padding-bottom: 50rpx;
		overflow: hidden;
	}
	.linear {
		position: absolute;
		background: linear-gradient(to bottom, #418EEB, #fff);
		width: 100%;
		height: 600rpx;
		z-index: -1;
	}
	.header {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	.route-detail {
		height: 50vh;
		.route-header {
			padding: 15px 15px 0 15px;
			font-size: 26rpx;
			.route-total {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				margin-top: 15rpx;
				.card {
					border-radius: 10rpx;
					background-color: #FAFAF0;
					width: 200rpx;
					height: 100rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					.description {
						font-size: 24rpx;
						color: #909399;
					}
				}
			}
		}
	}
</style>
